<template>
  <div class="menu-management">
    <el-form :inline="true" :model="menuParam" class="demo-form-inline">
      <el-form-item label="菜单名称">
        <el-input v-model="menuParam.name" placeholder="菜单名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
        <el-button type="primary" :icon="Refresh" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="handleAdd">新增</el-button>
    <el-button type="primary" @click="handleDelete()">删除</el-button>

    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column prop="name" label="菜单名称" />
      <el-table-column prop="icon" label="图标" />
      <el-table-column prop="type" label="类型" :formatter="menuTypeFormatter" />
      <el-table-column prop="component" label="组件名称" />
      <el-table-column prop="sort" label="排序" />
      <el-table-column prop="isVisible" label="是否展示" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleEdit(scope.row)">修改</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <MenuDialog
      v-if="displayFlag"
      :displayFlag="displayFlag"
      :title="title"
      :menuData="rowData"
      :parentMenuList="tableData"
    ></MenuDialog>
  </div>
</template>

<script lang="ts">
export default {
  name: 'MenuManagement',
}
</script>

<script lang="ts" setup>
import { Search, Refresh } from '@element-plus/icons-vue'
import { onBeforeMount, reactive, ref } from 'vue'
import { deleteMenu, getMenuList } from '@/http/api'
import type { MenuParam } from '@/types/param'
import type { SysMenu } from '@/types/index'
import MenuDialog from '../components/MenuDialog.vue'
import emitter from '@/utils/emitter'
import { ElMessage } from 'element-plus'
import { menuType } from '@/utils/dicts/menu'

const displayFlag = ref(false)
const tableData = ref<SysMenu[]>([])
const title = ref<string>('')
const deleteIds = ref<number[]>([])
const rowData = ref<SysMenu>({
  id: null,
  parentId: 0,
  name: '',
  component: '',
  icon: '',
  type: 0,
  isVisible: false,
  sort: 0,
})
const menuParam = reactive<MenuParam>({
  name: '',
  status: null,
  pageNum: 1,
  pageSize: 10,
})

const search = () => {
  getMenuList(menuParam).then((res) => {
    tableData.value = res.data
  })
}
const reset = () => {
  menuParam.name = ''
  menuParam.status = null
}

const menuTypeFormatter = (row: SysMenu) => {
  const type = menuType.value.find((item) => item.value === row.type)
  if (type) {
    return type.label
  }
  return row.type
}
const handleAdd = () => {
  displayFlag.value = true
  title.value = '菜单新增'
  rowData.value = {
    id: null,
    parentId: 0,
    name: '',
    component: '',
    icon: '',
    type: 0,
    isVisible: false,
    sort: 0,
  }
}
const handleEdit = (row: SysMenu) => {
  displayFlag.value = true
  title.value = '菜单修改'
  rowData.value = row
}
const handleSelectionChange = (dataArr: SysMenu[]) => {
  deleteIds.value = []
  if (dataArr.length === 0) {
    deleteIds.value = []
  } else {
    dataArr.forEach((item) => {
      deleteIds.value.push(item.id!)
    })
  }
}
const handleDelete = (id?: number) => {
  if (id) {
    deleteIds.value = []
    deleteIds.value.push(id)
  } else {
    if (deleteIds.value.length === 0) {
      ElMessage({
        message: '请选择要删除的数据！',
        type: 'warning',
      })
      return
    }
  }
  deleteMenu(deleteIds.value)
    .then((res) => {
      deleteIds.value = []
      search()
    })
    .catch((err) => {
      console.log(err)
    })
}

// 绑定事件
emitter.on('update:displayFlag', (flag: boolean) => {
  displayFlag.value = flag
})
emitter.on('refresh:menuTableData', () => {
  console.log('refresh:menuTableData')
  getMenuList(menuParam)
    .then((res) => {
      tableData.value = res.data
    })
    .catch((err) => {
      console.log(err)
    })
})

onBeforeMount(() => {
  console.log('onBeforeMount')
  getMenuList(menuParam)
    .then((res) => {
      tableData.value = res.data
    })
    .catch((err) => {
      console.log(err)
    })
})
</script>

<style lang="scss" scoped>
.menu-management {
  padding: 20px 20px 20px 20px;
}
</style>
